From 69ee1e1b86d42822dde6e25851c0cf6fcfca27c1 Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Wed, 13 May 2020 17:18:45 +0000 Subject: [PATCH] Adwaita: use thinner arrows for navigation - go-next go-previous instead of pan-end pan-start See https://gitlab.gnome.org/GNOME/gtk/-/issues/2675 --- gtk/theme/Adwaita/_colors.scss | 11 +- gtk/theme/Adwaita/_common.scss | 140 +++++++++++++------------ gtk/theme/Adwaita/_drawing.scss | 23 +++- gtk/theme/HighContrast/_colors-hc.scss | 2 + 4 files changed, 101 insertions(+), 75 deletions(-) diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss index be1215d795..32c6998696 100644 --- a/gtk/theme/Adwaita/_colors.scss +++ b/gtk/theme/Adwaita/_colors.scss @@ -18,9 +18,8 @@ $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), li $top_hilight: $borders_edge; $dark_fill: mix($borders_color, $bg_color, 50%); $headerbar_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%)); -$menu_color: if($variant == 'light', $base_color, mix($bg_color, $base_color, 20%)); -$popover_bg_color: $bg_color; -$popover_hover_color: lighten($bg_color, 5%); +$menu_color: $base_color; +$menu_selected_color: if($variant == 'light', darken($bg_color, 3%), $bg_color); $scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 50%)); $scrollbar_slider_color: mix($fg_color, $bg_color, 60%); @@ -73,8 +72,10 @@ $suggested_bg_color: $selected_bg_color; $suggested_border_color: $selected_borders_color; $progress_bg_color: $selected_bg_color; $progress_border_color: $selected_borders_color; -$checkradio_bg_color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color,10%)); +$checkradio_bg_color: $selected_bg_color; $checkradio_fg_color: $selected_fg_color; -$checkradio_borders_color: if($variant == 'light', darken($checkradio_bg_color,20%), darken($checkradio_bg_color,40%)); +$checkradio_borders_color: if($variant == 'light',darken($selected_bg_color,10%),darken($selected_bg_color,20%)); +$switch_bg_color: $selected_bg_color; +$switch_borders_color: if($variant == 'light',darken($switch_bg_color,15%),darken($switch_bg_color,30%)); $focus_border_color: if($variant == 'light', transparentize($selected_bg_color, 0.5), transparentize($selected_bg_color, 0.3)); $alt_focus_border_color: if($variant == 'light', transparentize(white, 0.2), transparentize(white,0.7)); diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index f240346b89..17774ede72 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -880,7 +880,7 @@ modelbutton.flat { @extend %undecorated_button; - &:hover { background-color: $popover_hover_color; } + &:hover { background-color: $menu_selected_color; } &:disabled { color: $insensitive_fg_color; @@ -898,12 +898,13 @@ modelbutton.flat arrow { background: none; min-width: 16px; min-height: 16px; + opacity: 0.3; //dim icon &:hover { background: none; } - &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + &.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); } - &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + &.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); } } /* oldstyle toolbar buttons */ @@ -1828,7 +1829,7 @@ popover.background { > contents { $_popover_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1)); - background-color: $popover_bg_color; + background-color: $menu_color; background-clip: padding-box; border: 1px solid $_popover_border; box-shadow: 0 1px 2px transparentize(black, 0.7); @@ -2263,9 +2264,9 @@ switch { &:checked { color: $selected_fg_color; - border-color: $checkradio_borders_color; - background-color: $checkradio_bg_color; - text-shadow: 0 1px transparentize($selected_borders_color, 0.5), + border-color: $switch_borders_color; + background-color: $switch_bg_color; + text-shadow: 0 1px transparentize($switch_borders_color, 0.5), 0 0 2px transparentize(white, 0.4); } @@ -2285,9 +2286,9 @@ switch { &:checked { @if $variant == 'light' { color: $backdrop_bg_color; } - border-color: if($variant == 'light', $checkradio_borders_color, - $selected_borders_color); - background-color: $checkradio_bg_color; + border-color: if($variant == 'light', $switch_borders_color, + $switch_borders_color); + background-color: $switch_bg_color; } &:disabled { @@ -2320,7 +2321,7 @@ switch { } } - &:checked > slider { border: 1px solid $checkradio_borders_color; } + &:checked > slider { border: 1px solid $switch_borders_color; } &:disabled > slider { @include button(insensitive); } @@ -2331,7 +2332,7 @@ switch { @include button(backdrop); } - &:checked > slider { border-color: $checkradio_borders_color; } + &:checked > slider { border-color: $switch_borders_color; } &:disabled > slider { @include button(backdrop-insensitive); } } @@ -2341,11 +2342,11 @@ switch { @if $variant == 'light' { box-shadow: none; - border-color: $checkradio_borders_color; + border-color: $switch_borders_color; - &:backdrop { border-color: $checkradio_borders_color; } + &:backdrop { border-color: $switch_borders_color; } - > slider { &:checked, & { border-color: $checkradio_borders_color; } } + > slider { &:checked, & { border-color: $switch_borders_color; } } } } } @@ -2487,31 +2488,6 @@ radio { -gtk-recolor(url("assets/dash@2-symbolic.symbolic.png"))); } } -// ANIMATION: -// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes, -// the transformation is set on the active state and it get reset on the checked state. -radio:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: scale(0); } - -check:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); } - -radio, -check { - &:active { -gtk-icon-transform: scale(0, 1); } // should tackle the indeterminate state, untested - - &:checked:not(:backdrop), &:indeterminate:not(:backdrop) { - -gtk-icon-transform: unset; - transition: 400ms; - } -} - -menu menuitem { - @at-root %menu_check_radio, - radio, - check { - &:checked:not(:backdrop), &:indeterminate:not(:backdrop) { transition: none; } - } -} - treeview.view check, treeview.view radio { &:selected { @@ -4329,7 +4305,7 @@ emoji-completion-row:hover { emoji-completion-row emoji:focus, emoji-completion-row emoji:hover { - background-color: $popover_hover_color; + background-color: $menu_selected_color; } popover.entry-completion > contents { @@ -4359,13 +4335,27 @@ menubar { } // remove padding and rounding from menubar submenu decoration .csd.popup decoration { border-radius:0; } + // only bottom part rounded for menubar menus + & > item popover.menu.background > contents { + margin-top: -1px; //nudge it into the menubar + border-top-left-radius: 0; + border-top-right-radius: 0; + padding: 0 0 $menu_radius 0; + } + //nested submenus + & > item popover.menu.background popover.menu.background > contents { + margin: 0; + border-radius: 0; + } } +$_menu-padding: 12px; + popover.menu { padding: 0px; - & box.inline-buttons { - padding: 0 20px; + box.inline-buttons { + padding: 0 $_menu-padding; button.image-button.model { @include button(undecorated); @@ -4377,12 +4367,12 @@ popover.menu { outline: none; transition: none; - &:selected { @extend %selected_items; } + &:selected { background: image($menu_selected_color); } } } - & box.circular-buttons { - padding: 6px 20px; + box.circular-buttons { + padding: 6px $_menu-padding; button.circular.image-button.model { @extend %list_button; @@ -4404,44 +4394,60 @@ popover.menu { margin: 6px 0; } - & accelerator { + accelerator { color: gtkalpha(currentColor,0.55); - &:dir(ltr) { margin-left: 20px; } - &:dir(rtl) { margin-right: 20px; } + &:dir(ltr) { margin-left: $_menu-padding; } + &:dir(rtl) { margin-right: $_menu-padding; } } - & check, - & radio { - @extend %menu_check_radio; + check, + radio { + @include check('menu', 'transparent', $text_color); + + &:hover { @include check('menu-active', 'transparent', $text_color); } + &:active { @include check('menu-active', 'transparent', $text_color); } } - & arrow.left, - & radio.left, - & check.left { - margin-left: 0; - margin-right: 8px; + //only menu radios have a border + radio { border-color: $borders_color; + &:active { border-color: transparentize($borders_color,0.5); } } - & arrow.right, - & radio.right, - & check.right { - margin-left: 8px; - margin-right: 0; + arrow.left, + radio.left, + check.left { + margin-left: -2px; + margin-right: 6px; } - & modelbutton { + arrow.right, + radio.right, + check.right { + margin-left: 6px; + margin-right: -2px; + } + + modelbutton { min-height: 30px; min-width: 40px; - padding: 0 20px; + padding: $_menu-padding/6 $_menu-padding; border-radius: 0; - &:selected { @extend %selected_items; } + &:selected { + color: $text-color; + background-color: $menu_selected_color; + } + &:selected:active { + //@extend %selected_items; + //color: $selected_fg_color; + background-color: darken($bg_color,14%); // matching buttons + } } - & label.title { + label.title { font-weight: bold; - padding: 4px 20px; + padding: 4px ($_menu-padding + 20px); //this will fall apart with font sizing } } diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss index 7e9e68ca31..467be6c817 100644 --- a/gtk/theme/Adwaita/_drawing.scss +++ b/gtk/theme/Adwaita/_drawing.scss @@ -537,7 +537,7 @@ * Check and Radio buttons * ***************************/ - @mixin check($t, $c:$bg_color, $tc:$fg_color, $checked: false) { + @mixin check($t, $c:$checkradio_bg_color, $tc:$checkradio_fg_color, $checked: false) { // Check/Radio drawing function // // $t: check/radio type, @@ -546,9 +546,9 @@ // $checked: bool to chose between checked/unchecked // // possible $t values: - // normal, hover, active, insensitive, backdrop, backdrop-insensitive + // normal, hover, active, insensitive, backdrop, backdrop-insensitive, menu - $_border_color: if($c==$checkradio_bg_color, $c, $alt_borders_color); + $_border_color: if($c==$checkradio_bg_color, $checkradio_borders_color, $alt_borders_color); $_dim_border_color: transparentize($_border_color, if($variant == 'light', 0.3, 0.7)); @if $t==normal { @@ -583,4 +583,21 @@ box-shadow: none; color: transparentize($tc, 0.3); } + + @if $t==menu { + transform: scale(0.8); + border-width: 1.2px; + border-color: transparent; + box-shadow: none; + background-image: image(transparent); + color: $tc; + } + + @if $t==menu-active { + transform: scale(0.8); + border-width: 1.2px; + color: $tc; + box-shadow: none; + background-image: image(transparent); + } } diff --git a/gtk/theme/HighContrast/_colors-hc.scss b/gtk/theme/HighContrast/_colors-hc.scss index d9dfc278cd..3533b6e90b 100644 --- a/gtk/theme/HighContrast/_colors-hc.scss +++ b/gtk/theme/HighContrast/_colors-hc.scss @@ -9,6 +9,8 @@ $selected_bg_color: darken($selected_bg_color,10%); $selected_borders_color: darken($selected_borders_color, 10%); $borders_color: if($variant == 'light', darken($borders_color, 30%), lighten($borders_color, 30%)); $alt_borders_color: if($variant == 'light', darken($alt_borders_color, 33%), lighten($alt_borders_color, 28%)); +$menu_color: $base_color; +$menu_selected_color: darken($bg_color,10%); //insensitive state derived colors $insensitive_fg_color: mix($fg_color, $bg_color, 50%); -- 2.30.2